<template>
	<div>
        	<div id="colorlib-page">
		<div id="colorlib-services">
			<div class="container">
				<div class="row text-center">
					<h2 class="bold">Message</h2>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="services-flex">
							<div class="one-third">
								<div class="row">
									<div class="col-md-12 col-md-offset-0 animate-box intro-heading">
										<span>Our message board</span>
										<h2>有什么建议 留言给我</h2>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="rotate">
											<h2 class="heading"><a href="/#/LeaveWord">去留言</a></h2>
										</div>
									</div>
									<div class="col-md-3">
										<!--  -->
									</div>
									<div class="col-md-4">
										<!--  -->
										<p v-for="(item, index) in messages" :key="index">{{item.m_name}}</p>
									</div>
									<div class="col-md-4">
										<p v-for="(item, index) in messages" :key="index">{{item.m_content}}----{{item.m_time | formatDate}}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-pb-sm text-center">
							<div class="row">
								<div class="col-md-10">
									<h2>Office</h2>
									<p>291 South 21th Street, <br> Suite 721 New York NY 10016</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Get in Touch</h2>
							<p><a href="#">noah@info.com</a></p>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Social</h2>
							<p class="colorlib-social-icons">
								<a href="#"><i class="icon-facebook4"></i></a>
								<a href="#"><i class="icon-twitter3"></i></a>
								<a href="#"><i class="icon-googleplus"></i></a>
								<a href="#"><i class="icon-dribbble2"></i></a>
							</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 text-center">
							<p>
							</p>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	</div>
</template>
<script>
import {messages} from '../api/index.js';
export default {
      name: 'messages',
      data () {
        return { 
		  messages:[],
		}
	  },
	filters: {
       formatDate: function (value) {
		   //parseInt字符串转换数字
        var date = new Date(parseInt(value));//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes();
        // var s = date.getSeconds();
        return Y+M+D+h+m;
      }
    },
      methods:{
        async getmessages(){ 
		  var result=await messages();
		//   console.log(result);
          this.messages=result['message']['message'];
        },
      },
      mounted(){ 
      this.getmessages();
      }
    }	
</script>